<template>
  <el-date-picker
    v-bind="$attrs"
    v-on="$listeners"
    :type="type"
    :value-format="currentValueFormat"
    :format="currentFormat"
  >
    <slot slot="range-separator"></slot>
  </el-date-picker>
</template>

<script>
const valueFormatConfig = {
  '^year$': 'yyyy',
  '^(month|monthrange)$': 'yyyy-MM',
  // week 返回的是本周的周一
  '^(date|daterange|dates|week)$': 'yyyy-MM-dd',
  '^(datetime|datetimerange)$': 'yyyy-MM-dd HH:mm:ss'
}

export default {
  name: 'ex-date-picker',
  props: {
    /**
     * 同 date-picker 的 value-format
     */
    valueFormat: {
      type: String,
      default: ''
    },
    /**
     * 同 date-picker 的 type，默认值 date
     */
    type: {
      type: String,
      default: 'date'
    },
    /**
     * 同 date-picker 的 format
     */
    format: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      valueFormatConfig: this.$valueFormatConfig || valueFormatConfig
    }
  },
  computed: {
    currentValueFormat () {
      if (this.valueFormat) {
        return this.valueFormat
      }
      const key = Object.keys(this.valueFormatConfig).find(k => new RegExp(k).exec(this.type))
      return this.valueFormatConfig[key] || ''
    },
    currentFormat () {
      // 如果设置了要显示的格式
      if (this.format) {
        return this.format
      }
      // 否则如果是周，自定义显示格式
      if (this.type === 'week') {
        return 'yyyy 第 WW 周'
      }
      // 否则跟 value-format 保持一致
      return this.currentValueFormat
    }
  }
}
</script>
